<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../dist/css/heard.css">
    <script src="../static/libs/javascripts/jQuery.js"></script>
    <script src="../static/libs/javascripts/cookie.js"></script>
    <title>Document</title>
    <style>
        
        ul{
            list-style-type: none;
        }
        /* 登录左边 */
        .main{
            width: 100%;
            height: 900px;
            /* background-color: chartreuse; */
        }
        .big_box {
                width: 1200px;
                height: 100%;
                margin: 0 auto;
                overflow: hidden;
                /* background-color:red; */
        }
        .title{
            display: inline-block;
            height: 60px;
            line-height: 60px;
            font-size: 20px;
            font-weight: bold;
            padding-left: 20px;
            width: 100%;
             border-bottom: 2px solid #e6e6e6;
             background-color: rgba(243, 104, 104, 0.6);
           }
       .min_box{
        width: 50%;
    height: 407px;
    float: left;
       }
       .form-group{
            position:relative; 
           margin-left: 56px;
           margin-top: 26px;
           margin-bottom: 27px;
       }
       .form-group input{
        height: 36px;
          border: 1px solid #d5d5d5;
          margin-left: 30px;
          width: 328px;
          /* position: absolute; */
          margin-left: 175px;
       }
       .form-group .tit{
        position: absolute;
        font-size: 14px;
          font-weight: bold;
        text-align: right;
        width: 200px;
        margin-left: -40px;
        margin-top: 11px;
       }
       .min_box .box{
             margin-left: 179px;
             margin-top: 25px;
       }
       .box>.forget{
        color: #dc2829;
       }
       .box .login{
        background: #dc2829;
    color: #fff;
    border-width: 0px;
    width: 84px;
    height: 35px;
    border-radius: 4px;
    vertical-align: top;
    margin-left: 122px;
       }
       .min_box>.box.ul>li{
        width: 125px;
    height: 46px;
    float: left;
    line-height: 46px;
       }
       /* //登录右侧 */
        .right_box{
            width: 50%;
            height: 407px;
            float: left;
            /* background-color: rgb(232, 245, 177); */
        }
        .login2-title{
            font-weight: bold;
            font-size: 18px;
            margin-left: 51px;
            margin-top: 37px;
        }
        .login2-tips{
            margin-left: 85px;
            margin-top: 24px;
        }
        .right_box>ul{
            margin-top: 25px;
            margin-left: 85px;
            color: #a6a6a6;
        }
        .right_box>ul>li{
            margin-bottom: 10px;
            padding-left: 20px;
            background: url(img/login2-list-img.png) left center no-repeat;
            font-size: 14px;
        }
        .right_box .free-register{
            margin-top: 27px;
            background: #000;
            color: #fff;
            border-radius: 4px;
            margin-left: 165px;
            width: 107px;
            height: 30px;
        }
    </style>
</head>
<body>
    <div class="logo">
        <div class="logo_left">附近门店</div>
        <div class="logo_cen"><img class="fl"
                src="https://gdp.alicdn.com/imgextra/i3/693060164/TB25ioRc9BjpuFjSsplXXa5MVXa_!!693060164.png"></div>
        <div class="logo_right"><input class="ipt" type="text" placeholder="大闹天宫"><span><img
                    src="../static/images/img_xiaotu/Y67VIK0)PQVBDR~2(E[@9XT.png" alt=""></span></div>
    </div>
    <!-- //导航条 -->
    <div class="nav">
        <div class="nav_1">
            <ul class="navs">
                <li>首页</li>
                <li>2021夏季热卖</li>
                <li>明星同款</li>
                <li>IP联名</li>
                <li>国民珍品</li>
                <li>2021秋季新品</li>
            </ul>
        </div>
    </div>

    <!-- //登录 -->
     
    <div class="main"> 
        <div class="big_box">
                <span class="title">登录页面</span>
        <!-- //左边 -->
        <div class="min_box">
                <div class="form-group">
                   <label for="username" class="tit">用户名:</label>
                   <input type="text" class="form-control" id="username" value="">
                </div>
             <div class="form-group">
   
                   <label for="password" class="tit">密码:</label>
                   <input type="text" class="form-control" id="password" value="">
             </div>
                  <div class="box">
                    <span class="forget">忘了自己的账号或密码？</span>
                    <!-- <a href="./denglu.html"><input type="button" class="login" value="登录"></a> -->
                    <input type="button" class="login" value="登录">
                  </div>
                  <div class="box">
                    <span>使用其他合作网站登录</span>
                </div>
       </div> 
       <!-- 右边 -->
        <div class="right_box">
            <div class="login2-title">注册成为新用户</div>
            <div class="login2-tips">现在免费注册成为海澜之家用户，便能立刻享受便宜又<br>放心的购物乐趣。</div>
            <ul>
                <li>简单快捷1分钟完成注册</li>
                <li>注册用户可方便的收藏商品</li>
                <li>注册用户可方便的管理查询自己的订单</li>
            </ul>
            <a href="./zhuce.html"><input type="button" class="free-register" value="免费注册"></a>
        </div>       
       </div> 
    </div> 

    <!--登录js -->
   <script src="./javascripts/denglu.js"></script>
   
    
</body>
</html>